<template>
    <div class="filter-bar">
        <label for="xiao_qu">校区</label>
        <select id="xiao_qu" v-model="selectedXiao_qu">
            <option value="haidian">海淀校区</option>
            <option value="fengtai">丰台校区</option>
        </select>
        <input type="text" placeholder="输入教室编号或名称" v-model="searchText"/>
        <button @click="filterClassrooms">筛选</button>
    </div>
    <div class="data-list">
      <table>
        <thead>
          <tr>
            <th>选择</th>
            <th>编号</th>
            <th>校区</th>
            <th>教室名称</th>
            <th>教室地址</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(classroom, index) in filteredClassrooms" :key="index">
            <td>
              <input type="checkbox" v-model="classroom.selected" />
            </td>
            <td>{{ classroom.id }}</td>
            <td>{{ classroom.xiao_qu }}</td>
            <td>{{ classroom.name }}</td>
            <td>{{ classroom.address }}</td>
            <td>
              <button @click="deleteClassroom">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <button class="add-btn" @click="addClassroom">新增教室</button>
</template>

<script>
import axios from 'axios'
export default {
  name: 'ClassroomList',
  //data：模型层
  data(){
    return {
      title:"教室列表",
      shopList:[]
    }
  },
  beforeCreate(){
    console.log("初始化完成前")
  },
  created(){
    console.log("初始化完成")
  },
  mounted() {
    this.getProductList()
  },
  beforeMount() {
    console.log("组件挂载前")

  },
  methods:{
     getProductList() {
            //调用接口
            axios.get("http://localhost:8088/class/list")
                .then(res => {
                    if(res.data.code ==200) {
                        this.productList = res.data.data
                    } else {
                        console.log("加载失败")
                    }
                })
                .catch(error => {
                    console.log(error);
                })
     },
     // 删除产品信息
     deleteById:function(classroom){
      let id = classroom.id
      if(confirm("确认删除吗?")){
        //删除接口调用
       axios.get("http://localhost:8088/class/delete?id="+id)
        .then(res => {
            if(res.data.code ==200) {
                this.getProductList()
            } else {
                console.log("加载失败")
            }
        })
        .catch(error => {
            console.log(error);
        })
       }
     },


    //  edit(item){
    //     let id = item.id
    //     this.$router.push({
    //         path:'/edit',
    //         query:{
    //             id:id,
    //             xiao_qu:xiao_qu,
    //             name:item.name,
    //             address:item.address
    //         }
    //     })
    //  }
  }
}
const addClassroom = async () => {
  const newClassroom = {
    id: '5',
    xiao_qu: 555555555,
    name: '555555',
    address: '55555555555',
    selected: false,
  };
  try {
    // 发送POST请求到后端新增教室接口
    const response = await axios.post('http://localhost:8088/class', newClassroom);
    // 假设后端返回新增成功的教室数据，将其添加到classrooms数组中
    classrooms.value.push(response.data);
    console.log('新增教室成功');
  } catch (error) {
    console.error('新增教室失败：', error);
    // 可以在这里添加错误提示，比如弹出提示框告知用户新增失败
    alert('新增教室失败，请稍后再试');
  }
};
</script>


<style scoped>
.classroom-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.filter-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.filter-bar label,
.filter-bar select,
.filter-bar input,
.filter-bar button {
  margin-right: 10px;
}

.data-list table {
  width: 100%;
  border-collapse: collapse;
}

.data-list th,
.data-list td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.add-btn {
  margin-top: 20px;
}
</style>
